import React, { FC, useState } from "react";
import { Outlet } from "react-router-dom";
import { useNavigate, useLocation } from "react-router-dom";
import styles from "./ManageLayout.module.scss";
import { Button, Space, Divider, message } from "antd";
import {
  BarsOutlined,
  DeleteOutlined,
  PlusOutlined,
  StarOutlined,
} from "@ant-design/icons";
import { useRequest } from "ahooks";
import { creatQuestion } from "../utils/api";

const ManageLayout: FC = () => {
  const nav = useNavigate();
  const { pathname } = useLocation();
  // const [loading,setLoading]=useState(false)
  //创建问卷
  // const createHandle = async () => {
  //   setLoading(true)
  //   const res = await creatQuestion();
  //   const { id }  = res || {}
  //   if (id) {
  //     nav(`/question/edit/${id}`);
  //     message.success("创建成功");
  //     setLoading(false)
  //   }
  // };
  const {
    loading,
    error,
    run: createHandle,
  } = useRequest(creatQuestion, {
    manual: true,
    onSuccess(res) {
      nav(`/question/edit/${res.id}`);
      message.success("创建成功");
    },
  });
  return (
    <div className={styles.container}>
      <div className={styles.left}>
        <Space direction="vertical">
          <Button
            type="primary"
            size="middle"
            icon={<PlusOutlined />}
            onClick={createHandle}
            disabled={loading}
          >
            创建问卷
          </Button>
          <Divider style={{ borderTop: "transparent" }} />
          <Button
            type={pathname.startsWith("/manage/list") ? "default" : "text"}
            size="middle"
            icon={<BarsOutlined />}
            onClick={() => nav("/manage/list")}
          >
            我的问卷
          </Button>
          <Button
            type={pathname.startsWith("/manage/star") ? "default" : "text"}
            size="middle"
            icon={<StarOutlined />}
            onClick={() => nav("/manage/star")}
          >
            星标问卷
          </Button>
          <Button
            type={pathname.startsWith("/manage/trash") ? "default" : "text"}
            size="middle"
            icon={<DeleteOutlined />}
            onClick={() => nav("/manage/trash")}
          >
            回收站
          </Button>
        </Space>
      </div>
      <div className={styles.right}>
        <Outlet />
      </div>
    </div>
  );
};
export default ManageLayout;
